<template>
	<!-- 用户登录后的操作页面 -->
	<view class="page page-fill">
		<!-- 主体结构 头像 昵称 生日 性别  点击就跳转页面 进跳转进行单独的修改的-->
		<view class="page-block info-list">
			<!-- 头像 -->

			<view class="item-wapper face-line-upbottom" @click="operator">
				<view class="info-words">头像</view>

				<view class="right-wapper">
					<image :src="globalUser.faceImage" class="face"></image>
					<view class="arrow-block">
						<image src="../../static/icos/left-gray-arrow.png" class="arrow-ico"></image>
					</view>
				</view>
			</view>
			<view class="line-top">
				<view class="line"></view>
			</view>
			<!-- 昵称 -->
			<view class="item-wapper" @click="modifyNickname">
				<view class="info-words">昵称</view>

				<view class="right-wapper">
					<view class="gray-fields">
						{{globalUser.nickname}}
					</view>
					<view class="arrow-block">
						<image src="../../static/icos/left-gray-arrow.png" class="arrow-ico"></image>
					</view>
				</view>
			</view>

			<view class="line-top">
				<view class="line"></view>
			</view>
			<!-- 生日 -->
			<view class="item-wapper" @click="modifyBirthday">
				<view class="info-words">生日</view>

				<view class="right-wapper">
					<view class="gray-fields">
						{{globalUser.birthday}}
					</view>
					<view class="arrow-block">
						<image src="../../static/icos/left-gray-arrow.png" class="arrow-ico"></image>
					</view>
				</view>
			</view>

			<view class="line-top">
				<view class="line"></view>
			</view>


			<!-- 性别  开始是未选择的所以要进行判断-->
			<view class="item-wapper" @click="modifySex">
				<view class="info-words">性别</view>

				<view class="right-wapper">
					<view class="gray-fields">

						<view v-if="globalUser.sex == 1">
							男
						</view>
						<view v-else-if="globalUser.sex == 0">
							女
						</view>
						<view v-else>
							未选择
						</view>

					</view>
					<view class="arrow-block">
						<image src="../../static/icos/left-gray-arrow.png" class="arrow-ico"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="footer-wapper">
			<view class="footer-words" @click="cleanStorage">
				清理缓存
			</view>
			<view class="footer-words" style="margin-top: 10upx;" @click="logout">
				退出登录
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				globalUser: {} //获取本地缓存的数据进展示
			}
		},
		//页面一加载就要进获取本地存储的中的数据 用户信息 同步获取 通过全局方法
		onShow() {
			var me = this;
			var globalUser = me.getGlobalUser("globalUser");
			me.globalUser = globalUser;
		},
		methods: {
			//点击修改性别 跳转页面
			modifySex() {
				uni.navigateTo({
					url: "../sex/sex"
				})
			},
			//点击修改生日 跳转页面
			modifyBirthday() {
				uni.navigateTo({
					url: "../meBirthday/meBirthday"
				})
			},
			//点击修改昵称 跳转页面
			modifyNickname() {
				uni.navigateTo({
					url: "../meNickname/meNickname"
				})
			},
			//选择头像信息 分预览和从相册 相册是单独一个页面 分h5 和裁剪后的图片上传
			operator() {
				var me = this;
				var globalUser = me.getGlobalUser("globalUser"); //获取用户信息
				uni.showActionSheet({  //显示操作菜单  进行按钮的选择
					itemList: ["查看我的头像", "从相册选择上传"],  //按钮的文字数组
					success(res) {  //点击后执行的回调
						var index = res.tapIndex;  //通过index 下标获取点击的是那个操作按钮
						if (index == 0) {  //预览图片
							// 预览头像 
							var faceArr = [];  //因为参数是需要一个数组的 所以定义一个数组存储 演示的图片 push方法 
							faceArr.push(globalUser.faceImage);
							uni.previewImage({   
								urls: faceArr,//需要预览的图片链接列表
								current: faceArr[0]  //current 为当前显示图片的链接/索引值，就是现在第一张就好 
							})
						} else if (index == 1) {  //图片上传选择其他的 这样得到的是一个字符串 记得要转json格式 跳转到别的页面进行操作
							// 选择上传头像
							uni.chooseImage({  //从本地相册选择图片或使用相机拍照
								count: 1,
								sizeType: ["compressed"],  //original 原图，compressed 压缩图
								sourceType: ["album"],  //album 从相册选图，camera 使用相机，
								success(res) { // 成功执行的回调
									// 获得临时路径
									var tempFilePath = res.tempFilePaths[0];  //得到返回上传后的图片临时路径
									// #ifdef H5  //在h5端显示 实现页面跳转 实现重新或者确定上传功能
									uni.navigateTo({
										url: "../meFace/meFace?tempFilePath=" + tempFilePath
									})
									// #endif
									// #ifndef H5  //排除H5页面显示 其他都能显示  //调用这个现在的api 修改里面的代码 就是实现上传功能
									uni.navigateTo({
										url: "../faceCrop/faceCrop?tempFilePath=" + tempFilePath
									})
									// #endif
								}
							})

						}
					}
				})
			},
		}
	}
</script>

<style>

</style>
